<template>
  <div id="goods_list">
    <HeaderStatus></HeaderStatus>
    <div class="mui-content" style="">
      <scroller 
          :on-refresh="refresh"
          :on-infinite="infinite" style="top:48px">
          <!-- content goes here -->
        
        <div class="group_goods_panel" @tap="open_detail(i.goodsid,i.sid)" v-for="(i,k) in goods_list" :key="k">
          <div class="goods_img"><img :src="i.pic" alt=""></div>
          <div class="goods_title">{{i.name}}</div>
          <div class="group_goods_bottom">
            <div class="goods_price">￥{{i.money}} <del>￥{{i.min_price}}</del> </div>
            <div class="goods_btn">立即拼团</div>
          </div>
        </div>

       </scroller>
    </div>
  </div>
</template>
<script>
import HeaderStatus from "../../components/Header";
import goods_ajax from "../../ajax/goods_ajax";
import util from "../../tools/util";
export default {
  name: "goods_list",
  components: {
    HeaderStatus
  },
  data() {
    return {
      goods_list: [],
      header_text: "",
      page_num: 1
    };
  },
  methods: {
    refresh(done) {
      done();
    },
    infinite(done) {
      goods_ajax.get_group_goods_list(
        {
          bid: this.$store.state.account.community.sqid,
          page: this.page_num
        },
        res => {
          if (res.length > 0) {
            if (this.page_num == 1) {
              this.goods_list = res;
            } else {
              this.goods_list = this.goods_list.concat(res);
            }

            this.page_num++;
            done(false);
          } else {
            done(true);
          }
        }
      );
    },
    open_detail(goodsid, sid) {
      if (!(goodsid && sid)) {
        mui.toast("缺少goodsid或sid");
        return;
      }
      this.$router.push(
        "/shop/goods_list/goods?goodsid=" + goodsid + "&sid=" + sid
      );
    },
    goods_data_init() {}
  },
  created() {
    this.header_text = this.$store.state.common.shop_home_chanel_names[1].title;
    this.goods_data_init();
    // 接收到参数后再初始化头部
    this.$store.commit("change_header", {
      header_text: this.header_text,
      header_right_func: false,
      header_right_html: "<span></span>",
      header_back_btn: true
    });
  },
  mounted() {}
};
</script>
<style lang="less" scoped>
@import "../../../static/pxvalue.less";
.mui-content {
  padding-top: 64px;
  background-color: #f9f9f9;
  height: 100%;
}
.group_goods_panel {
  width: @p680;
  overflow: hidden;
  margin-left: @p35;
  padding: @p20;
  background-color: #fff;
  margin-bottom: @p20;
  .goods_img {
    width: 100%;
    text-align: center;
    img {
      width: 50%;
    }
  }
  .goods_title {
    font-size: @p24;
    font-weight: 800;
  }
  .goods_price {
    float: left;
    line-height: @p70;
    font-size: @p36;
    color: #00a0e9;
    del {
      font-size: @p24;
      color: #464646;
    }
  }
  .goods_btn {
    float: right;
    width: @p176;
    height: @p70;
    line-height: @p70;
    background: linear-gradient(to right, #23b1f1, #1c84fd);
    font-size: @p24;
    color: #fff;
    text-align: center;
    border-radius: @p14;
  }
}
</style>

